#include("header.html")
<script type="text/javascript">
	// 改变侧边栏激活
	changeTab(2);
</script>
<div class="admin-content">
	<div class="admin-box">
		<div class="col-lg-12 col-xs-12">
			<h4 class="pull-left"><a href="/admin/articles">文章管理</a></h4>
			<div class="pull-right">
				<form @submit.prevent="search_">
					<input v-model="searchTitle" placeholder="标题">
					<button type="submit" style="border-radius: 5px;" class="btn btn-default btn-sm">搜索</button>
				</form>
			</div>
		</div>

		<div>
			<div class="col-lg-3 col-sm-3 col-xs-12">
				<div class="box-min"  style="background-image: url('/static/images/admin/art.png');">
					<div>
						<p @click="jumpPage(1, '', -1)">文章总数<strong>&nbsp;{{numInfo.all}}&nbsp;</strong></p>
						<p>已发布<strong>&nbsp;{{numInfo.allPut}}&nbsp;</strong></p>
						<p>未发布<strong>&nbsp;{{numInfo.allDraft}}&nbsp;</strong></p>
	 				</div>
				</div>
			</div>

			<div class="col-lg-3 col-sm-3 col-xs-12">
				<div class="box-min" style="background-image: url('/static/images/admin/news.png');">
					<div>
						<p @click="jumpPage(1, 'news', -1)">动态总数<strong>&nbsp;{{numInfo.news}}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'news', 1)">已发布<strong>&nbsp;{{numInfo.newsPut}}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'news', 0)">未发布<strong>&nbsp;{{numInfo.newsDraft}}&nbsp;</strong></p>
					</div>
				</div>
			</div>

			<div class="col-lg-3 col-sm-3 col-xs-12">
				<div class="box-min" style="background-image: url('/static/images/admin/notice.png');">
					<div>
						<p @click="jumpPage(1, 'notice', -1)">公告总数<strong>&nbsp;{{numInfo.notices }}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'notice', 1)">已发布<strong>&nbsp;{{numInfo.noticePut}}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'notice', 0)">未发布<strong>&nbsp;{{numInfo.noticeDraft}}&nbsp;</strong></p>
					</div>
				</div>
			</div>

			<div class="col-lg-3 col-sm-3 col-xs-12">
				<div class="box-min"  style="background-image: url('/static/images/admin/result.png');">
					<div>
						<p @click="jumpPage(1, 'result', -1)">成果总数<strong>&nbsp;{{numInfo.results}}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'result', 1)">已发布<strong>&nbsp;{{numInfo.resultPut}}&nbsp;</strong></p>
						<p @click="jumpPage(1, 'result', 0)">未发布<strong>&nbsp;{{numInfo.resultDraft}}&nbsp;</strong></p>
	 				</div>
				</div>
			</div>
		</div>

		<div class="col-lg-12 col-xs-12 table-responsive">
			<table class="table-bordered table table-striped">
				<thead>
					<tr>
						<td>标题</td>
						<td>时间</td>
						<td>浏览量</td>
						<td>分类</td>
						<td>状态</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr is="art-tr" v-for="(item, index) in list" :art="item"
							:delete_="delete_" :index="index"></tr>
					<tr class="text-center" v-show="list.length <= 0">
						<td colspan="7">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- 分页按钮 -->
		<div class="col-lg-12 col-xs-12 text-center" v-show="pages.totalPages > 1">
			<ul class="pagination pagination-sm">
				<li><a href="javascript:" @click="jumpPage(1)">首页</a></li>
				<li v-for="pageNo in pages.numbers" :class="pageNo == pages.pageNum ? 'active' :''">
					<a href="javascript:" @click="jumpPage(pageNo)">{{pageNo}}</a>
				</li>
				<li><a href="javascript:" @click="jumpPage(pages.totalPages)">尾页</a></li>
			</ul>
		</div>
	</div>
</div>
<template id="art-tr">
	<tr>
		<td>{{art.title}}</td>
		<td>{{art.time}}</td>
		<td>{{art.views}}</td>
		<td><span :class="'art-' + art.type"></span></td>
		<td>
			<span v-if="art.status === 1" class="label label-success">已发布</span>
			<span v-if="art.status === 0" class="label label-warning">未发布</span>
		</td>
		<td style="width: 150px;">
				<a :href="'/admin/publish?id=' + art.id" class="btn btn-xs btn-primary">编辑</a>
				<button @click="delete_(index)" class="btn btn-xs btn-danger">删除</button>
				<a :href="'/article/' + art.id" target="_blank" class="btn btn-xs btn-info">查看</a>
		</td>
	</tr>
</template>
<script>
	 var arts = new Vue({
		 el: '.admin-box',
		 data: {
		   numInfo: {
		     all: 0,
				 allPut: 0,
				 allDraft: 0,
				 news: 0,
				 newsPut: 0,
				 newsDraft: 0,
         notices: 0,
         noticePut: 0,
         noticeDraft: 0,
				 results: 0,
				 resultPut: 0,
				 resultDraft: 0
			 },
			 list: [],
			 pages: { // 控制页码的显示
         totalRows: -1, // 总数据量
         totalPages: -1, // 总页数
         pageNum: 1, // 当前页码
				 numbers: [] // 自动生成的页码数组
			 },
			 query: { // 保存查询条件
		     status: -1,
				 type: ''
			 },
       searchTitle: ''
		 },
		 methods: {
       search_: function () {
				 $.post('/article/like', {title: this.searchTitle}, function (data) {
           arts.fillData(data, 1);
         });
       },
		   delete_: function (index) { // 删除操作
         if (index >= 0 && index < this.list.length) {
           if (confirm("确定删除该文章？")) {
             var deleteArt = this.list[index];
             $.post('/article/delete/' + deleteArt.id, function (data) {
               if (data.success) {
                 arts.list.splice(index, 1); // 删除
                 arts.flushNumData(); // 更新条数数据
                 arts.flushArtData(); // 所有的查询条件都是保存过的
               }
             });
           }
         }
       },
			 flushArtData: function () { // 刷新数据 根据分页添加 和 查询条件
		     $.post('/article/page/' + this.pages.pageNum, this.query, function (data) {
           arts.fillData(data);
         });
       },
			 flushNumData: function () {
         $.post('/article/allCount', function (data) {
           arts.numInfo = data.payload;
         });
       },
			 jumpPage: function (pageNo, type, status) {
         var e = arguments.callee.caller.arguments[0] || window.event || event; //event兼容
         var num = 0;
         try {
           num = parseInt(e.target.children[0].innerText);  // 避免在跳转页码时异常导致失败
         } catch (e) {
           if (pageNo > 0) {
             num = 1;
					 }
           console.log(e);
				 }
         if (num > 0) {
           if (type !== undefined) this.query.type = type;
           if (status !== undefined) this.query.status = status;
           if (pageNo !== undefined) {
             if (pageNo <= 0) pageNo = 1;
             else if (pageNo > this.pages.totalPages) pageNo = this.pages.totalPages;
             this.pages.pageNum = pageNo;
           }

           this.flushArtData();
				 } else {
		       this.pages.totalRows = 0;
		       this.list = [];
				 }
       },
			 flushPage: function () {
         this.pages.numbers = createPage(this.pages.pageNum, this.pages.totalPages);
       },
			 fillData: function (data, totalNum) {
         if (data.success) {
           this.list = data.payload.rows || [];

           this.pages.totalRows = data.payload.totalRows;
           this.pages.totalPages = totalNum || data.payload.totalPages;
           this.pages.pageNum = totalNum || data.payload.pageNum;
         } else {
           this.list = [];
           this.pages.totalRows = 0;
           this.pages.totalPages = 0;
           this.pages.pageNum = 1;
         }
       }
		 },
		 watch: {
		   'pages.totalPages': function (nv, ov) {
		     this.flushPage();
       }
		 },
     components: {
		   'art-tr': {
		     props: ['art', 'delete_', 'index'],
				 template: '#art-tr'
			 }
		 },
     mounted: function () {
		   this.flushNumData();
		   this.flushArtData();
     }
	 });
</script>
#include("footer.html")
